<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 简易案例
    // 需求 描述一只猫的名称，颜色，叫声，技能

    // 面向过程  就是分析出解决问题所需要的步骤，然后用变量, 函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。

    var name = "Tom";
    var color = "black";

    function call() {
        console.log("喵喵");
    }

    function skill() {
        console.log("捉老鼠");
    }

    // 面向对象 =>  就是将你的需求抽象成一个对象, 然后针对这个对象分析其特征(属性)与行为(方法) -- 这个对象就称之为类(面向对象)

    // 把面向过程中的变量和函数  放到对象中  作为对象的属性和方法
    // 字面量对象(最简单的面向对象  => 对象数据 {})
    /* var Tom = {
        name: "Tom",
        color: "black",
        species: "cat",
        call: function () {
            console.log("喵喵");
        },
        skill() {
            console.log("捉老鼠");
        }
    }

    var Kitty = {
        name: "Kitty",
        color: "pink",
        species: "cat",
        call: function () {
            console.log("喵喵");
        },
        skill() {
            console.log("捉老鼠");
        }
    } */

    // 函数 (工厂模式  =>  批量创建对象  只要传入对应的参数 就可以得到对象)
    // - 优点 快速得到想要的对象
    // - 缺点 

    // (1)  通过工厂模式创建的对象跟函数没有任何关联
    // 对比Array 非常明显
    // var arr = new Array(); //构造函数
    // console.log(arr instanceof Array); // true

    // (2)公用的属性和方法重复声明  需要占据多余内存
    // { say, skill } 两个方法重复声明 4次 占内存

    function Cat(name, color) {
        var obj = {
            name: name,
            color: color,
            species: "cat",
            call: function () {
                console.log("喵喵");
            },
            skill() {
                console.log("捉老鼠");
            }
        }
        return obj;
    }

    var Tom = Cat("Tom", "black");
    console.log(Tom, Tom instanceof Cat, Tom instanceof Object);

    var Kitty = Cat("Kitty", "black");
    console.log(Kitty, Kitty instanceof Cat, Kitty instanceof Object);









</script>

</html>